因為接下來製作元件的過程，會需要使用到 icon 以及樣式上的設定，今天就先來安裝 Nuxt 、 icon 套件以及 tailwind 吧～

PS. 在專案需要使用大量 icon 的情形下，會透過引入套件的方式來節省時間

step 1: 安裝 Nuxt

• 首先安裝 nuxt

  npx nuxi@latest init <project-name>
  

step 2: 安裝 Nuxt Icon

• 官網上有整理許多的 module 可以安裝 (https://nuxt.com/modules)
  這次要使用的是 Nuxt Icon 這一個 icon module

npx nuxi module add icon

• 安裝完成之後會在 package.json 出現

  "dependencies": {
    "@nuxt/icon": "^1.5.0",
    "nuxt": "^3.13.0",
    "vue": "latest"
  }

• 基本使用:

  • 到 nuxt.config.ts 將 @nuxt/icon 設定進 modules，並開啟 devtool

    export default defineNuxtConfig({
      devtools: { enabled: true },
      modules: ['@nuxt/icon']
    })
    

  • 執行 npm run dev 啟動

  • 找到底部的 devtool，開啟後就可以透過 devtool 查看有什麼 icon 哩!

    

  • 挑選一個喜歡的 icon 簡單測試一下，如果看到一個大大的狗骨頭那就是成功安裝啦!

    // App.vue
    <template>
      <div >
        <Icon name="fa6-solid:bone" size="50" />
      </div>
    </template>
    

  • 除了可以透過 單獨呼叫 icon 出來，接下來在製作元件時也會讓他成為元件的一部分~

step 3: 安裝 Tailwind

• NuxtTailwind

• 執行安裝指令

  npm install -D @nuxtjs/tailwindcss
  

• 安裝完成後一樣會在 package.json 中出現

• 別忘記到 nuxt.config.ts 設定進 modules

  export default defineNuxtConfig({
    modules: [
    '@nuxt/icon',
    '@nuxtjs/tailwindcss'
    ]
  })
  

• 執行 npm run dev 啟動
  在 terminal 會看到 Tailwind 提供了一個預覽畫面

  ℹ Tailwind Viewer: http://localhost:3000/_tailwind/  
  

  點進去之後可以看到各項 tailwind 給的預設設定，這些都可以透過 tailwind.config 進行更改

  

  如上圖，我在 tailwind.condfig.ts 新增了 primary 這個設定，在這裡也會幫忙呈現呦！就可以在這邊預覽效果

  export default {
    theme: {
      extend: {
        colors: {
          primary: {
            50: '#fcf5f4',
            100: '#f9ecea',
            200: '#f3dbd8',
            300: '#e9bdb8',
            400: '#dc9690',
            500: '#cc6b67',
            600: '#b64949',
            700: '#98383b',
            800: '#803136',
            900: '#6e2d33'
          }
        }
      }
    }
  }
  

• 找到剛剛 <Icon /> 設定的大骨頭，試試看改變他顏色吧！